<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>可用余额</title>
    <link href="../../../css/style.css" rel="stylesheet" type="text/css">
    <link href="../../../css/mui.css" rel="stylesheet" type="text/css">
    <style>
    	body{
    		background: #fff!important;
    	}
    	.chargeshadow{
    		
    	}
    	.chargeTop{
    		background: #29abe3;
    		width: 100%;
    		height:40px;
    	}
    	.paytop{
    		border-top-left-radius:10px;
    		border-top-right-radius:10px;
    		background: #fff;
    		padding: 10px;
    	}
    	.paytop li{
    		margin-bottom: 20px;
    	}
    	.paytop li span{
    		color: #7b7b7b;
    	}
    	.chargebg{
    		background: #f1f1f1;
    	}
    	.chargeContent{
    		position: absolute;
    		width: 90%;
    		left: 5%;
    		top: 0;
    		font-size: 14px;
    		
    	}
    	.bg img{
    		width: 100%;
    	}
    	.bg{
    		height: 20px;
    	}
    	.gold{
    		background: #f8f8f8;
    		text-align: center;
    		padding: 20px 0;
    	}
    	.gold img{
    		width: 30%;
    	}
    	.bgb{
    		height: 42px;
    	}
    	.bgb img{
    		width: 100%;
    		height: 42px;
    	}
    	.payUl{
    		border-bottom-left-radius: 10px;
    		border-bottom-right-radius: 10px;
    	}
    	.mui-card{
    		box-shadow: none;
    		
    	}
    	.mui-card .mui-radio img{
    		width: 20px;
    		margin-right: 10px;
    		margin-top: 2px; 
    	}
    	.mui-input-row label{
    		width: 70%;
    		padding: 0;
    	}
    	.mui-input-group .mui-input-row{
    		padding: 15px 0;
    		height: 50px;
    	}
    	.mui-input-group .mui-input-row:after{
    		left: 0;
    	}
    	.mui-radio input[type='radio'], .mui-checkbox input[type='checkbox']{
    		right: -8px;
    		top: 15px;
    	}
    	.paytitle{
    		color: #999;
    		border-bottom: solid 1px #F1F1F1;
    		width: 100%;
    		display: block;
    		padding-bottom: 10px;
    	}
    	.mui-radio input[type='radio']:before{
    		font-size: 20px;
    	}
    	.mui-radio input[type=radio]:checked:before {
    		content: '\e442';
    		color: #00b5fa;
    		font-size: 20px;
    	}
    	.patbtn{
    		text-align: center;
    		background: #00a0e9;
    		border-radius: 10px;
    		margin: 0 auto;
    		height: 40px;
    		line-height: 40px;
    		color: #fff;
    		margin-top: 40px;
    		margin-bottom: 40px;
    		width: 80%;
    	}
    </style>
</head>
<body>
  <div id="charge">
  	<div class="chargeTop">
  		
  	</div>
  	<div class="chagreheight" style="background: #f2f2f2;">
  		<div class="chargeContent">
  			<div class="chargeshadow">
  					<ul class="paytop">
	  			<li>开通服务<span class="fr">视频开通</span></li>
	  			<li>开通类型<span class="fr">开通</span></li>
	  			<li>开通班级<span class="fr">向日葵班</span></li>
	  			<li>有效期<span class="fr">1321321</span></li>
	  		</ul>
	  		<div class="bg"><img src="../../../images/buy_03.png" /></div>
	  		<div class="gold"><img src="../../../images/gold_03.jpg" /></div>
	  		<div class="bgb"><img src="../../../images/buy2_06.png" /></div>
	  		<div class="mui-table-view mui-segmented-control payUl">
			<div class="mui-card">
				<span class="paytitle">请选择支付方式</span>
				<form class="mui-input-group">
					<div class="mui-input-row mui-radio">
						<img class="fl" src="../../../images/pay_weixin.png" />
						<label>支付宝支付</label>
						<input name="radio1" type="radio" checked="checked"/>
					</div>
					<div class="mui-input-row mui-radio">
						<img class="fl" src="../../../images/pay_zhifubao.png" />
						<label>微信支付</label>
						<input name="radio1" type="radio" />
					</div>
				</form>
			</div>
			<div class="clear"></div>
			</div>
  			</div>
	  	
	<div class="patbtn" @tap="pay()">确认支付</div>
  		</div>
  		
  	</div>
  </div>
  <script src="../../../js/jquery-1.8.3.min.js"></script>	
  <script src="../../../js/mui.js"></script>
   <script src="../../../js/app.js"></script>
    <script src="../../../js/vue.min.js"></script>
  <script>
  	$(function(){
  		$('.chagreheight').height($('.chargeContent').height())
  	})
  	mui('.payList').on('tap', '.mui-table-view-cell', function() {
  		
  		//this.style.background="#000";
  		
  	})
  	var uid='';
  	var state='';
  	mui.plusReady(function(){
  		state=app.getState();
  		uid=state.userid;
  		mui.post(Apiurl+'index/member_info',{
  			uid:uid
  		},function(data){
  			charge.items=data;
  		},'json')
  	})
  	var charge= new Vue({
  		el:'#charge',
  		data:{
  			items:[]
  		},
  		methods:{
  			pay: function(){
  				mui.post(Apiurl+'index/jia',{
		  			uid:uid
		  		},function(data){
		  			if(data.status==200){
		  				 
		  			}
		  		},'json')
  			}
  		}
  	})
  </script>
</body>
</html>
